import React, { useState, useEffect, Children } from 'react'
import { StyleSheet, Animated } from "react-native";

const StickyHeader = ({ children, style, stickyHeaderY, stickyScrollY, }) => {
    // const [stickyHeaderY, setStickyHeaderY] = useState(-1);
    // const [stickyScrollY, setStickyScrollY] = useState(new Animated.Value(0));
    const [stickyLayoutY, setStickyLayoutY] = useState(0);
    const _onLayout = (event) => {
        setStickyLayoutY(event.nativeEvent.layout.y);
    }
    const y = stickyHeaderY != -1 ? stickyHeaderY : stickyLayoutY;
    const translateY = stickyScrollY.interpolate({
        inputRange: [-1, 0, y, y + 1],
        outputRange: [0, 0, 0, 1],
    });
    return (
        <Animated.View
            onLayout={_onLayout}
            style={[
                style,
                styles.container,
                { transform: [{ translateY }] }
            ]}
        >
            {children}
        </Animated.View>
    )
}
const styles = StyleSheet.create({
    container: {
        zIndex: 100
    },
});

export default StickyHeader
